
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab面板切换</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);;
        }
        .tab{
            width: 20%;
            font-weight: bold;
            margin-left: 10px;
            cursor: pointer;
            position: relative;
        }
        .tab dl{
            border-bottom:1px solid #ffffff ;
        }
        .tab dl dt{
            background-color: #4b7bec;
            padding: 6px;
            color: #ffffff;
        }
        .tab dl dd{
            background-color: #f7b731;
            padding: 10px;
        }
        /* dd:hover{
            display: block;
            font-size: 20px;
            background-color: #a55eea !important;
            color: #ffffff;
        } */

        p{
            font-size: 30px;
            position: absolute;
            top: 0;
            left: 25%;
        }
        
    </style>
</head>
<body>
    <div class="tab">
        <dl>
            <dt data-action="toggle">编程语言</dt>
            <dd hidden='true' data-action="hidden">---JS</dd>
            <dd hidden='true' data-action="hidden">---PHP</dd>
        </dl>
        <dl>
            <dt data-action="toggle">小说列表</dt>
            <dd hidden='true' data-action="hidden">---射雕英雄传</dd>
            <dd hidden='true' data-action="hidden">---侠客行</dd>
        </dl>
        <dl>
            <dt data-action="toggle">流行歌曲</dt>
            <dd hidden='true' data-action="hidden">---忘记时间</dd>
            <dd hidden='true' data-action="hidden">---大城小爱</dd>
        </dl>
        <dl>
            <dt data-action="toggle">TOP5歌手</dt>
            <dd hidden='true' data-action="hidden">---胡歌</dd>
            <dd hidden='true' data-action="hidden">---王力宏</dd>
        </dl>
        <dl>
            <dt data-action="toggle">社区团购</dt>
            <dd hidden='true' data-action="hidden">---美团优选</dd>
            <dd hidden='true' data-action="hidden">---今日优选</dd>
            <dd hidden='true' data-action="hidden">---诚信优选</dd>
        </dl>
    </div>
    <p id="showP"></p>
</body>
</html>

<script>
    class HD{
        constructor(el){
            this.el = el;
            this.showP = document.getElementById('showP');
            el.addEventListener('click',this.handle.bind(this));
            el.addEventListener('mouseover',this.over.bind(this));
            el.addEventListener('mouseout',this.out.bind(this));
        }

        handle(e){
            const action = e.target.dataset.action;
            if(action) this[action](e);
        }

        over(e){
            if(e.target.tagName == 'DD'){
                e.target.style.cssText = `display: block;font-size: 20px;background-color: #a55eea !important;color: #ffffff;`;
                let dt_value = e.target.parentElement.querySelector('dt').innerHTML;
                let dd_value = e.target.innerHTML.substr(3);
                this.showP.innerHTML = `当前位置 > <span style='color:#eb3b5a'>${dt_value}</span> > <span style='color:#fa8231'>${dd_value}</span>`;
            }
        }

        out(e){
            if(e.target.tagName == 'DD'){
                e.target.style.cssText = `background-color: #f7b731;padding: 10px;`;
            }
        }

        toggle(e){
            //将所有的dt都隐藏
            let dds = document.querySelectorAll(`[data-action='hidden']`);
            dds.forEach((el,index) => (el.hidden = true));
            //获取当前元素的下一个兄弟节点
            // e.target.nextElementSibling.hidden = '';
            e.target.parentElement.querySelectorAll('dd').forEach((el,index) => (el.hidden = ''));
        }
        hidden(e){
            e.target.hidden = true;
        }
    }

    new HD(document.querySelector('.tab'));
</script>